<template>
  <div class="swiper">
    <h2>基础用法</h2>
    <mala-swiper :imgList="imgList"></mala-swiper>
    <h2>自定义箭头</h2>
    <mala-swiper
      :imgList="imgList"
      :leftArrow="arrow"
      :rightArrow="arrow"></mala-swiper>
    <h2>是否显示指示器</h2>
    <mala-swiper :imgList="imgList" :indicator="false"></mala-swiper>
    <h2>自定义指示器颜色</h2>
    <mala-swiper
      :imgList="imgList"
      indicatorColor="rgba(168, 218, 94, 0.7)"
      indicatorActiveColor="rgba(248, 182, 16, 0.7)"></mala-swiper>
    <h2>轮播速度</h2>
    <mala-swiper :imgList="imgList" speed="faster"></mala-swiper>
    <mala-swiper :imgList="imgList" speed="default"></mala-swiper>
    <mala-swiper :imgList="imgList" speed="slower"></mala-swiper>
  </div>
</template>

<script setup>
import img1 from "../assets/images/御坂美琴03.jpg"
import img2 from "../assets/images/七宫智音03.jpg"
import img3 from "../assets/images/鸢一折纸02.jpg"

import arrow from "../assets/icons/mima.png"

const imgList = [img1, img2, img3]
</script>

<style scoped>
</style>